<!DOCTYPE HTML>
<html lang="en" >
    <!-- Start book 我的笔记 -->
    <head>
        <!-- head:start -->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Vuejs基础 | 我的笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-toggle-chapters/toggle.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../../前端学习笔记/Vuejs/Vuejs进阶.html" />
    
    
    <link rel="prev" href="../../前端学习笔记/Vuejs/Vuejs知识目录.html" />
    

        <!-- head:end -->
    </head>
    <body>
        <!-- body:start -->
        
    <div class="book"
        data-level="2.2.1"
        data-chapter-title="Vuejs基础"
        data-filepath="前端学习笔记/Vuejs/Vuejs基础.md"
        data-basepath="../.."
        data-revision="Sat Dec 29 2018 14:49:31 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="工具使用手册/工具使用手册目录.html">
            
                
                    <a href="../../工具使用手册/工具使用手册目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        工具使用手册
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="工具使用手册/MarkDown的基本语法.html">
            
                
                    <a href="../../工具使用手册/MarkDown的基本语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        MarkDown的基本语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="工具使用手册/MarkDown的注意事项.html">
            
                
                    <a href="../../工具使用手册/MarkDown的注意事项.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        MarkDown的注意事项
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="工具使用手册/gitbook的使用手册/gitbook目录.html">
            
                
                    <a href="../../工具使用手册/gitbook的使用手册/gitbook目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        gitbook的使用手册
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="工具使用手册/gitbook的使用手册/gitbook语法.html">
            
                
                    <a href="../../工具使用手册/gitbook的使用手册/gitbook语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.1.</b>
                        
                        gitbook语法
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="前端学习笔记/前端学习目录表.html">
            
                
                    <a href="../../前端学习笔记/前端学习目录表.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        前端学习笔记
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="前端学习笔记/HTML/HTML笔记目录.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML笔记目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        HTML
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1.1" data-path="前端学习笔记/HTML/HTML的基本结构.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的基本结构.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.1.</b>
                        
                        HTML的基本语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.2" data-path="前端学习笔记/HTML/HTML的基本标签.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的基本标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.2.</b>
                        
                        HTML的基本标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.3" data-path="前端学习笔记/HTML/HTML的列表标签.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的列表标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.3.</b>
                        
                        HTML的列表标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.4" data-path="前端学习笔记/HTML/HTML的链接标签.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的链接标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.4.</b>
                        
                        HTML的链接标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.5" data-path="前端学习笔记/HTML/HTML的图片标签.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的图片标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.5.</b>
                        
                        HTML的图片标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.6" data-path="前端学习笔记/HTML/form表单.html">
            
                
                    <a href="../../前端学习笔记/HTML/form表单.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.6.</b>
                        
                        form表单
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.7" data-path="前端学习笔记/HTML/form常用表单类型.html">
            
                
                    <a href="../../前端学习笔记/HTML/form常用表单类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.7.</b>
                        
                        form常用表单类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.8" data-path="前端学习笔记/HTML/实体字符.html">
            
                
                    <a href="../../前端学习笔记/HTML/实体字符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.8.</b>
                        
                        实体字符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.9" data-path="前端学习笔记/HTML/多媒体.html">
            
                
                    <a href="../../前端学习笔记/HTML/多媒体.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.9.</b>
                        
                        多媒体
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.10" data-path="前端学习笔记/HTML/iframe框架.html">
            
                
                    <a href="../../前端学习笔记/HTML/iframe框架.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.10.</b>
                        
                        iframe框架
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="前端学习笔记/Vuejs/Vuejs知识目录.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs知识目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        Vuejs
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter active" data-level="2.2.1" data-path="前端学习笔记/Vuejs/Vuejs基础.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs基础.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.1.</b>
                        
                        Vuejs基础
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.2" data-path="前端学习笔记/Vuejs/Vuejs进阶.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs进阶.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.2.</b>
                        
                        Vuejs进阶
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.3" data-path="前端学习笔记/Vuejs/Vuejs高级.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs高级.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.3.</b>
                        
                        Vuejs高级
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.4" data-path="前端学习笔记/Vuejs/Vuejs项目.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs项目.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.4.</b>
                        
                        Vuejs项目
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="前端学习笔记/CSS/CSS基础知识目录.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS基础知识目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        CSS
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.3.1" data-path="前端学习笔记/CSS/CSS样式优先级.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS样式优先级.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.1.</b>
                        
                        CSS样式优先级
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.2" data-path="前端学习笔记/CSS/CSS选择器.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.2.</b>
                        
                        CSS选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.3" data-path="前端学习笔记/CSS/属性选择器.html">
            
                
                    <a href="../../前端学习笔记/CSS/属性选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.3.</b>
                        
                        属性选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.4" data-path="前端学习笔记/CSS/伪类选择器.html">
            
                
                    <a href="../../前端学习笔记/CSS/伪类选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.4.</b>
                        
                        伪类选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.5" data-path="前端学习笔记/CSS/CSS盒子模型.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS盒子模型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.5.</b>
                        
                        CSS盒子模型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.6" data-path="前端学习笔记/CSS/伪对象选择器.html">
            
                
                    <a href="../../前端学习笔记/CSS/伪对象选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.6.</b>
                        
                        伪对象选器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.7" data-path="前端学习笔记/CSS/CSS字体.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS字体.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.7.</b>
                        
                        CSS字体
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.8" data-path="前端学习笔记/CSS/CSS行高.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS行高.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.8.</b>
                        
                        CSS行高
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.9" data-path="前端学习笔记/CSS/CSS文字排版.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS文字排版.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.9.</b>
                        
                        CSS文字排版
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.10" data-path="前端学习笔记/CSS/CSS背景.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS背景.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.10.</b>
                        
                        CSS背景
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.11" data-path="前端学习笔记/CSS/CSS浮动.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS浮动.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.11.</b>
                        
                        CSS浮动
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.12" data-path="前端学习笔记/CSS/CSS定位.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS定位.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.12.</b>
                        
                        CSS定位
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.13" data-path="前端学习笔记/CSS/CSS动效.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS动效.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.13.</b>
                        
                        CSS动效
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.14" data-path="前端学习笔记/CSS/CSS自定义动画.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS自定义动画.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.14.</b>
                        
                        CSS自定义动画
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.4" data-path="前端学习笔记/项目代码解析/项目案例总览.html">
            
                
                    <a href="../../前端学习笔记/项目代码解析/项目案例总览.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.</b>
                        
                        项目代码解析
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.4.1" data-path="前端学习笔记/项目代码解析/功能小案例合集/小案例合集目录.html">
            
                
                    <a href="../../前端学习笔记/项目代码解析/功能小案例合集/小案例合集目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.1.</b>
                        
                        功能小案例合集
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.4.2" data-path="前端学习笔记/项目代码解析/大项目案例合集/大项目案例合集.html">
            
            <span><b>2.4.2.</b> 大项目案例合集</span>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.5" data-path="前端学习笔记/JavaScriptES6/JavaScriptES6.html">
            
                
                    <a href="../../前端学习笔记/JavaScriptES6/JavaScriptES6.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.</b>
                        
                        JavaScriptES6
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.5.1" data-path="前端学习笔记/JavaScriptES6/ES6-Class.html">
            
                
                    <a href="../../前端学习笔记/JavaScriptES6/ES6-Class.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.1.</b>
                        
                        ES6-Class
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5.2" data-path="前端学习笔记/JavaScriptES6/ES6模块化.html">
            
                
                    <a href="../../前端学习笔记/JavaScriptES6/ES6模块化.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.2.</b>
                        
                        ES6模块化
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5.3" data-path="前端学习笔记/JavaScriptES6/ES6箭头函数.html">
            
                
                    <a href="../../前端学习笔记/JavaScriptES6/ES6箭头函数.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.3.</b>
                        
                        ES6箭头函数
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.6" data-path="前端学习笔记/gulp工具的使用/gulp工具的使用.html">
            
                
                    <a href="../../前端学习笔记/gulp工具的使用/gulp工具的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.6.</b>
                        
                        gulp工具的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7" data-path="前端学习笔记/jQuery/jQuery知识框架.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery知识框架.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.</b>
                        
                        jQuery
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.7.1" data-path="前端学习笔记/jQuery/jQuery基础.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery基础.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.1.</b>
                        
                        jQuery基础
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7.2" data-path="前端学习笔记/jQuery/jQuery事件.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery事件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.2.</b>
                        
                        jQuery事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7.3" data-path="前端学习笔记/jQuery/jQuery案例.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery案例.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.3.</b>
                        
                        jQuery案例
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7.4" data-path="前端学习笔记/jQuery/jQuery插件.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery插件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.4.</b>
                        
                        jQuery插件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7.5" data-path="前端学习笔记/jQuery/jQueryAjax.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQueryAjax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.5.</b>
                        
                        jQueryAjax
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8" data-path="前端学习笔记/JavaScript/JavaScript.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.</b>
                        
                        JavaScript
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.1" data-path="前端学习笔记/JavaScript/JavaScript基础/JavaScript基础.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/JavaScript基础.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.</b>
                        
                        JavaScript基础
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.1.1" data-path="前端学习笔记/JavaScript/JavaScript基础/认识JavaScript.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/认识JavaScript.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.1.</b>
                        
                        认识JavaScript
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.2" data-path="前端学习笔记/JavaScript/JavaScript基础/js变量.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js变量.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.2.</b>
                        
                        js变量
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.3" data-path="前端学习笔记/JavaScript/JavaScript基础/js数据类型.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js数据类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.3.</b>
                        
                        js数据类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.4" data-path="前端学习笔记/JavaScript/JavaScript基础/js数据类型判断.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js数据类型判断.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.4.</b>
                        
                        js数据类型判断
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.5" data-path="前端学习笔记/JavaScript/JavaScript基础/js练习题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js练习题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.5.</b>
                        
                        js练习题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.6" data-path="前端学习笔记/JavaScript/JavaScript基础/js流程控制.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js流程控制.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.6.</b>
                        
                        js流程控制
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.7" data-path="前端学习笔记/JavaScript/JavaScript基础/js循环.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.7.</b>
                        
                        js循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.8" data-path="前端学习笔记/JavaScript/JavaScript基础/js运算符.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.8.</b>
                        
                        js运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.9" data-path="前端学习笔记/JavaScript/JavaScript基础/js字符串和布尔值.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js字符串和布尔值.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.9.</b>
                        
                        js字符串和布尔值
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.10" data-path="前端学习笔记/JavaScript/JavaScript基础/js函数和作用域.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js函数和作用域.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.10.</b>
                        
                        js函数和作用域
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.11" data-path="前端学习笔记/JavaScript/JavaScript基础/js函数的补充.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js函数的补充.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.11.</b>
                        
                        js函数的补充
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.12" data-path="前端学习笔记/JavaScript/JavaScript基础/js字符串方法.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js字符串方法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.12.</b>
                        
                        js字符串方法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.13" data-path="前端学习笔记/JavaScript/JavaScript基础/js数组的方法.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js数组的方法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.13.</b>
                        
                        js数组的方法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.14" data-path="前端学习笔记/JavaScript/JavaScript基础/jsDate时间.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/jsDate时间.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.14.</b>
                        
                        jsDate时间
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.15" data-path="前端学习笔记/JavaScript/JavaScript基础/jsDOM获取.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/jsDOM获取.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.15.</b>
                        
                        jsDOM获取
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.16" data-path="前端学习笔记/JavaScript/JavaScript基础/js垃圾回收机制.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js垃圾回收机制.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.16.</b>
                        
                        js垃圾回收机制
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.17" data-path="前端学习笔记/JavaScript/JavaScript基础/jsDOM操作.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/jsDOM操作.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.17.</b>
                        
                        jsDOM操作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.18" data-path="前端学习笔记/JavaScript/JavaScript基础/math.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/math.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.18.</b>
                        
                        math
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.19" data-path="前端学习笔记/JavaScript/JavaScript基础/number.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/number.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.19.</b>
                        
                        number
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.20" data-path="前端学习笔记/JavaScript/JavaScript基础/array.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/array.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.20.</b>
                        
                        array
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.21" data-path="前端学习笔记/JavaScript/JavaScript基础/boolean.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/boolean.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.21.</b>
                        
                        boolean
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.22" data-path="前端学习笔记/JavaScript/JavaScript基础/date.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/date.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.22.</b>
                        
                        date
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.23" data-path="前端学习笔记/JavaScript/JavaScript基础/arguments对象.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/arguments对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.23.</b>
                        
                        arguments对象
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.2" data-path="前端学习笔记/JavaScript/JavaScript进阶/JavaScript进阶.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/JavaScript进阶.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.</b>
                        
                        JavaScript进阶
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.2.1" data-path="前端学习笔记/JavaScript/JavaScript进阶/js定时器.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js定时器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.1.</b>
                        
                        js定时器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.2" data-path="前端学习笔记/JavaScript/JavaScript进阶/js快速排序.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js快速排序.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.2.</b>
                        
                        js快速排序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.3" data-path="前端学习笔记/JavaScript/JavaScript进阶/js冒泡排序.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js冒泡排序.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.3.</b>
                        
                        js冒泡排序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.4" data-path="前端学习笔记/JavaScript/JavaScript进阶/js递归.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js递归.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.4.</b>
                        
                        js递归
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.5" data-path="前端学习笔记/JavaScript/JavaScript进阶/js倒计时.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js倒计时.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.5.</b>
                        
                        js倒计时
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.6" data-path="前端学习笔记/JavaScript/JavaScript进阶/js轮播图.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js轮播图.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.6.</b>
                        
                        js轮播图
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.7" data-path="前端学习笔记/JavaScript/JavaScript进阶/js省市联动.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js省市联动.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.7.</b>
                        
                        js省市联动
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.8" data-path="前端学习笔记/JavaScript/JavaScript进阶/js拖拽事件.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js拖拽事件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.8.</b>
                        
                        js拖拽事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.9" data-path="前端学习笔记/JavaScript/JavaScript进阶/js鼠标三击事件.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js鼠标三击事件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.9.</b>
                        
                        js鼠标三击事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.10" data-path="前端学习笔记/JavaScript/JavaScript进阶/js多个按键触发.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js多个按键触发.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.10.</b>
                        
                        js多个按键触发
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.11" data-path="前端学习笔记/JavaScript/JavaScript进阶/function.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/function.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.11.</b>
                        
                        js的function
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.12" data-path="前端学习笔记/JavaScript/JavaScript进阶/function的使用.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/function的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.12.</b>
                        
                        jsfunction的使用
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.3" data-path="前端学习笔记/JavaScript/JavaScript高级/JavaScript高级.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/JavaScript高级.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.</b>
                        
                        JavaScript高级
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.3.1" data-path="前端学习笔记/JavaScript/JavaScript高级/js创建对象.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js创建对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.1.</b>
                        
                        js创建对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.2" data-path="前端学习笔记/JavaScript/JavaScript高级/js对象的属性.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js对象的属性.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.2.</b>
                        
                        js对象的属性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.3" data-path="前端学习笔记/JavaScript/JavaScript高级/js对象的继承.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js对象的继承.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.3.</b>
                        
                        js对象的继承
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.4" data-path="前端学习笔记/JavaScript/JavaScript高级/js构造函数和原型对象.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js构造函数和原型对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.4.</b>
                        
                        js构造函数和原型对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.5" data-path="前端学习笔记/JavaScript/JavaScript高级/js事件冒泡.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js事件冒泡.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.5.</b>
                        
                        js事件冒泡
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.6" data-path="前端学习笔记/JavaScript/JavaScript高级/js运用Ajax.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js运用Ajax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.6.</b>
                        
                        js运用Ajax
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.7" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的call和apply.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的call和apply.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.7.</b>
                        
                        js中的call和apply
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.8" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的new.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的new.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.8.</b>
                        
                        js中的new
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.9" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的this.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的this.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.9.</b>
                        
                        js中的this
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.10" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的闭包.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的闭包.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.10.</b>
                        
                        js中的闭包
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.11" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的跨域.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的跨域.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.11.</b>
                        
                        js中的跨域
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.12" data-path="前端学习笔记/JavaScript/JavaScript高级/js事件代理.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js事件代理.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.12.</b>
                        
                        js事件代理
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.13" data-path="前端学习笔记/JavaScript/JavaScript高级/js的BOM对象.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js的BOM对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.13.</b>
                        
                        js的BOM对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.14" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的存储.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的存储.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.14.</b>
                        
                        js中的存储
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.15" data-path="前端学习笔记/JavaScript/JavaScript高级/js面向对象编程.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js面向对象编程.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.15.</b>
                        
                        js面向对象编程
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.16" data-path="前端学习笔记/JavaScript/JavaScript高级/proto.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/proto.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.16.</b>
                        
                        proto属性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.17" data-path="前端学习笔记/JavaScript/JavaScript高级/js正则表达式.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js正则表达式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.17.</b>
                        
                        js正则表达式
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.4" data-path="前端学习笔记/JavaScript/JavaScript高级2/JavaScript高级2.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/JavaScript高级2.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.</b>
                        
                        JavaScript高级2
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.4.1" data-path="前端学习笔记/JavaScript/JavaScript高级2/参数代码太长的问题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/参数代码太长的问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.1.</b>
                        
                        参数代码太长的问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.2" data-path="前端学习笔记/JavaScript/JavaScript高级2/传统构造函数存在的问题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/传统构造函数存在的问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.2.</b>
                        
                        传统构造函数存在的问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.3" data-path="前端学习笔记/JavaScript/JavaScript高级2/对象的动态特性.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/对象的动态特性.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.3.</b>
                        
                        对象的动态特性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.4" data-path="前端学习笔记/JavaScript/JavaScript高级2/对象相关的其他知识.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/对象相关的其他知识.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.4.</b>
                        
                        对象相关的其他知识
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.5" data-path="前端学习笔记/JavaScript/JavaScript高级2/构造函数.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/构造函数.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.5.</b>
                        
                        构造函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.6" data-path="前端学习笔记/JavaScript/JavaScript高级2/函数的重复创建问题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/函数的重复创建问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.6.</b>
                        
                        函数的重复创建问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.7" data-path="前端学习笔记/JavaScript/JavaScript高级2/基础复习题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/基础复习题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.7.</b>
                        
                        基础复习题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.8" data-path="前端学习笔记/JavaScript/JavaScript高级2/继承的实现方式.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/继承的实现方式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.8.</b>
                        
                        继承的实现方式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.9" data-path="前端学习笔记/JavaScript/JavaScript高级2/静态成员和实例成员.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/静态成员和实例成员.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.9.</b>
                        
                        静态成员和实例成员
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.10" data-path="前端学习笔记/JavaScript/JavaScript高级2/面向对象的三大特性.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/面向对象的三大特性.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.10.</b>
                        
                        面向对象的三大特性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.11" data-path="前端学习笔记/JavaScript/JavaScript高级2/面向对象概念介绍.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/面向对象概念介绍.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.11.</b>
                        
                        面向对象概念介绍
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.12" data-path="前端学习笔记/JavaScript/JavaScript高级2/深拷贝和浅拷贝.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/深拷贝和浅拷贝.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.12.</b>
                        
                        深拷贝和浅拷贝
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.13" data-path="前端学习笔记/JavaScript/JavaScript高级2/使用原型解决构造函数问题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/使用原型解决构造函数问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.13.</b>
                        
                        使用原型解决构造函数问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.14" data-path="前端学习笔记/JavaScript/JavaScript高级2/属性搜索原则.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/属性搜索原则.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.14.</b>
                        
                        属性搜索原则
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.15" data-path="前端学习笔记/JavaScript/JavaScript高级2/数据类型.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/数据类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.15.</b>
                        
                        数据类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.16" data-path="前端学习笔记/JavaScript/JavaScript高级2/异常处理.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/异常处理.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.16.</b>
                        
                        异常处理
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.17" data-path="前端学习笔记/JavaScript/JavaScript高级2/原型的使用.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/原型的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.17.</b>
                        
                        原型的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.18" data-path="前端学习笔记/JavaScript/JavaScript高级2/原型链结构.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/原型链结构.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.18.</b>
                        
                        原型链结构
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.19" data-path="前端学习笔记/JavaScript/JavaScript高级2/原型相关概念.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/原型相关概念.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.19.</b>
                        
                        原型相关概念
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.20" data-path="前端学习笔记/JavaScript/JavaScript高级2/原型式继承.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/原型式继承.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.20.</b>
                        
                        原型式继承
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.21" data-path="前端学习笔记/JavaScript/JavaScript高级2/值类型和引用类型.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/值类型和引用类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.21.</b>
                        
                        值类型和引用类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.22" data-path="前端学习笔记/JavaScript/JavaScript高级2/值类型和引用类型的特征.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/值类型和引用类型的特征.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.22.</b>
                        
                        值类型和引用类型的特征
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.5" data-path="前端学习笔记/JavaScript/JavaScript题库/JavaScript题库.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript题库/JavaScript题库.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.5.</b>
                        
                        JavaScript题库
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.5.1" data-path="前端学习笔记/JavaScript/JavaScript题库/JavaScript基础题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript题库/JavaScript基础题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.5.1.</b>
                        
                        JavaScript基础题
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.6" data-path="前端学习笔记/JavaScript/ES6语法/ES6语法.html">
            
            <span><b>2.8.6.</b> ES6语法</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.6.1" data-path="前端学习笔记/JavaScript/ES6语法/ES6箭头函数.html">
            
            <span><b>2.8.6.1.</b> ES6箭头函数</span>
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.9" data-path="前端学习笔记/GIT/git的使用.html">
            
                
                    <a href="../../前端学习笔记/GIT/git的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.9.</b>
                        
                        GIT
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.10" data-path="前端学习笔记/SASS语法/SASS语法.html">
            
                
                    <a href="../../前端学习笔记/SASS语法/SASS语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.10.</b>
                        
                        SASS语法
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.10.1" data-path="前端学习笔记/SASS语法/SASS安装.html">
            
                
                    <a href="../../前端学习笔记/SASS语法/SASS安装.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.10.1.</b>
                        
                        SASS安装
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.11" data-path="前端学习笔记/插件的使用/插件目录.html">
            
                
                    <a href="../../前端学习笔记/插件的使用/插件目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.11.</b>
                        
                        插件的使用
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.11.1" data-path="前端学习笔记/插件的使用/高德地图API.html">
            
                
                    <a href="../../前端学习笔记/插件的使用/高德地图API.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.11.1.</b>
                        
                        高德地图API
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.11.2" data-path="前端学习笔记/插件的使用/轮播图插件.html">
            
                
                    <a href="../../前端学习笔记/插件的使用/轮播图插件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.11.2.</b>
                        
                        轮播图插件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.11.3" data-path="前端学习笔记/插件的使用/Animate插件.html">
            
                
                    <a href="../../前端学习笔记/插件的使用/Animate插件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.11.3.</b>
                        
                        Animate插件
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.12" data-path="前端学习笔记/移动端/移动端.html">
            
                
                    <a href="../../前端学习笔记/移动端/移动端.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.12.</b>
                        
                        移动端
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.12.1" data-path="前端学习笔记/移动端/移动端环境布局.html">
            
                
                    <a href="../../前端学习笔记/移动端/移动端环境布局.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.12.1.</b>
                        
                        移动端环境布局
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.13" data-path="前端学习笔记/网页布局神器/网页布局神器目录.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/网页布局神器目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.</b>
                        
                        网页布局神器
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.13.1" data-path="前端学习笔记/网页布局神器/FlexBox的使用.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/FlexBox的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.1.</b>
                        
                        FlexBox的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.13.2" data-path="前端学习笔记/网页布局神器/rem的使用.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/rem的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.2.</b>
                        
                        rem的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.13.3" data-path="前端学习笔记/网页布局神器/vw和vh的使用.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/vw和vh的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.3.</b>
                        
                        vw和vh的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.13.4" data-path="前端学习笔记/网页布局神器/媒体查询.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/媒体查询.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.4.</b>
                        
                        媒体查询
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.13.5" data-path="前端学习笔记/网页布局神器/筛子布局案例.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/筛子布局案例.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.5.</b>
                        
                        筛子布局案例
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.14" data-path="前端学习笔记/前端坑点总结/前端坑点总结.html">
            
                
                    <a href="../../前端学习笔记/前端坑点总结/前端坑点总结.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.14.</b>
                        
                        前端坑点总结
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.14.1" data-path="前端学习笔记/前端坑点总结/HTML和CSS坑点总结.html">
            
                
                    <a href="../../前端学习笔记/前端坑点总结/HTML和CSS坑点总结.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.14.1.</b>
                        
                        HTML和CSS坑点总结
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../" >我的笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h2 id="vuejs-&#x57FA;&#x7840;&#x77E5;&#x8BC6;">Vuejs &#x57FA;&#x7840;&#x77E5;&#x8BC6;</h2>
<pre><code class="lang-html">        <span class="hljs-comment">&lt;!-- 
            &#x7ED1;&#x5B9A;&#x65F6;&#x95F4; v-on 
            v-on:&#x63CF;&#x8FF0;&#x7B26;(&#x4E8B;&#x4EF6;&#x7C7B;&#x578B;)=&apos;&#x89E6;&#x53D1;&#x56DE;&#x8C03;&apos;

            &#x56DE;&#x8C03;&#x7684;&#x51FD;&#x6570; &#x4E0D;&#x5199;() &#x9ED8;&#x8BA4;&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570; &#x4F20;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;(event)
            &#x56DE;&#x8C03;&#x7684;&#x51FD;&#x6570; &#x5199;()&#x5C31;&#x4EE3;&#x8868;&#x6211;&#x4EEC;&#x4E3B;&#x52A8;&#x4F20;&#x5165;&#x53C2;&#x6570;&#xFF0C;vue&#x5219;&#x4E0D;&#x4F1A;&#x66FF;&#x6211;&#x4EEC;&#x4F20;&#x5165;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;
            &#x53C2;&#x6570;$event&#x8868;&#x793A;&#x5F53;&#x524D;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;

            v-on:&#x7F29;&#x5199;@ &#x4F8B;&#xFF1A;  @click
        --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">v-on:click</span>=<span class="hljs-value">&quot;add&quot;</span>&gt;</span>&#x70B9;&#x6211;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">v-on:click</span>=<span class="hljs-value">&quot;add($event,&apos;2&apos;)&quot;</span>&gt;</span>&#x70B9;&#x6211;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&quot;add(&apos;3&apos;)&quot;</span>&gt;</span>&#x70B9;&#x6211;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x6761;&#x4EF6;&#x6E32;&#x67D3; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&quot;isShow = !isShow&quot;</span>&gt;</span>&#x6761;&#x4EF6;&#x6E32;&#x67D3;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- 
            v-if &#x503C;&#x4E3A;true&#x5C31;&#x6E32;&#x67D3;&#xFF0C;false&#x5C31;&#x79FB;&#x9664;
         --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&quot;isShow&quot;</span>&gt;</span>&#x9009;&#x9879;&#x5361;1<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">v-else</span>&gt;</span>&#x9009;&#x9879;&#x5361;2<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x6761;&#x4EF6;&#x6E32;&#x67D3;2 --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&quot;type = 1&quot;</span>&gt;</span>&#x6761;&#x4EF6;&#x6E32;&#x67D3;1<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&quot;type = 2&quot;</span>&gt;</span>&#x6761;&#x4EF6;&#x6E32;&#x67D3;2<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&quot;type = 3&quot;</span>&gt;</span>&#x6761;&#x4EF6;&#x6E32;&#x67D3;3<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- 
            v-if &#x503C;&#x4E3A;true&#x5C31;&#x6E32;&#x67D3;&#xFF0C;false&#x5C31;&#x79FB;&#x9664;
         --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&quot;type == 1&quot;</span>&gt;</span>&#x9009;&#x9879;&#x5361;1<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">v-else-if</span>=<span class="hljs-value">&quot;type == 2&quot;</span>&gt;</span>&#x9009;&#x9879;&#x5361;2<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- &lt;div v-else&gt;&#x9009;&#x9879;&#x5361;3&lt;/div&gt; --&gt;</span>
         <span class="hljs-comment">&lt;!-- &#x5148;&#x9690;&#x85CF; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&quot;type !== 1 &amp;&amp; type !== 2&quot;</span>&gt;</span>&#x9009;&#x9879;&#x5361;3<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-title">hr</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- v-show  --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&quot;isShow = !isShow&quot;</span>&gt;</span>v-show<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">v-show</span>=<span class="hljs-value">&quot;isShow&quot;</span>&gt;</span>&#x9009;&#x9879;&#x5361;1<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">v-show</span>=<span class="hljs-value">&quot;!isShow&quot;</span>&gt;</span>&#x9009;&#x9879;&#x5361;2<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>

         <span class="hljs-comment">&lt;!-- 
             v-if &#x5982;&#x679C;&#x4E3A;false&#xFF0C;&#x8282;&#x70B9;&#x4E0D;&#x4F1A;&#x88AB;&#x6E32;&#x67D3;
             v-show &#x5982;&#x679C;&#x4E3A;false&#xFF0C;&#x8282;&#x70B9;display&#xFF1A;none

             &#x9996;&#x6B21;&#x52A0;&#x8F7D;&#x65F6;&#xFF0C;v-if&#x4E3A;false&#x7684;&#x8282;&#x70B9;&#x4E0D;&#x4F1A;&#x88AB;&#x6E32;&#x67D3;&#xFF0C;v-show &#x90FD;&#x4F1A;&#x6E32;&#x67D3;&#xFF0C;false&#x7684;&#x8282;&#x70B9;&#x53D8;&#x4E3A;display:none  v-if&gt;v-show

             &#x9891;&#x7E41;&#x5207;&#x6362;&#xFF1A;v-if&#x9700;&#x8981;&#x9891;&#x7E41;&#x589E;&#x5220;&#x8282;&#x70B9;&#xFF0C;v-show&#x53EA;&#x662F;&#x6539;&#x53D8;&#x6837;&#x5F0F;&#x800C;&#x5DF2;&#xFF0C;v-if&lt;v-show
          --&gt;</span>
</code></pre>
<pre><code class="lang-js">        <span class="hljs-comment">//ctrl + shift + p &#x641C;&#x7D22;&#x7528;&#x6237;&#x4EE3;&#x7801;&#x7247;&#x6BB5;</span>
        <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({
            el:<span class="hljs-string">&apos;#app&apos;</span>,
            data:{
                msg:<span class="hljs-string">&apos;vue.js&apos;</span>,
                type:<span class="hljs-number">1</span>,
                isShow:<span class="hljs-literal">true</span>     <span class="hljs-comment">//isShow&#x63A7;&#x5236;&#x9009;&#x9879;</span>
            },
            methods:{   <span class="hljs-comment">//&#x65B9;&#x6CD5;</span>
                add(myData,myData2){
                    <span class="hljs-comment">//&#x8BBF;&#x95EE;&#x5F53;&#x524D;&#x5B9E;&#x4F8B;&#x7684;data&#x6570;&#x636E;</span>
                    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.msg,myData,myData2)
                }
            }
        })
</code></pre>
<h2 id="vuejs02">Vuejs02</h2>
<pre><code class="lang-html"><span class="hljs-comment">&lt;!-- &#x6A21;&#x677F; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;app&quot;</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- &#x53CC;&#x82B1;&#x62EC;&#x53F7; &#xFF1A;&#x80E1;&#x5B50;&#x8BED;&#x6CD5; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span> hello {{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x6307;&#x4EE4; v-text:&#x7528;&#x4E8E;&#x8F93;&#x51FA;&#x6587;&#x672C; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">v-text</span>=<span class="hljs-value">&apos;p&apos;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- v-html &#x7528;&#x4E8E;&#x8F93;&#x51FA;&#x6587;&#x672C;&#x7684;&#x540C;&#x65F6;&#x5982;&#x679C;&#x5305;&#x542B;html&#x4EE3;&#x7801;&#xFF0C;&#x5219;&#x4F1A;&#x6E32;&#x67D3;&#x5BF9;&#x5E94;&#x7684;&#x7ED3;&#x6784; &#x7528;&#x6CD5;&#x7C7B;&#x4F3C; innerHTML --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">v-html</span>=<span class="hljs-value">&apos;p2&apos;</span>&gt;</span>v-html<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x80E1;&#x5B50;&#x8BED;&#x6CD5;&#x4E2D; &#x53EF;&#x4EE5;&#x5199;js&#x8868;&#x8FBE;&#x5F0F; &#x53EF;&#x4EE5;&#x5927;&#x81F4;&#x4E86;&#x89E3;&#x9875;&#x9762;&#x7684;&#x64CD;&#x4F5C;&#x903B;&#x8F91;--&gt;</span>
        <span class="hljs-comment">&lt;!-- &#x4E09;&#x76EE;&#x8FD0;&#x7B97;&#x7B26; &#x662F;&#x8868;&#x8FBE;&#x5F0F; if&#x4E0D;&#x662F; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span>hello{{ isVue? &apos;vue.js&apos;:&apos;world&apos;}}<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x7B97;&#x672F;&#x8FD0;&#x7B97;&#x7B26; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>{{ msg+100 }}<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x65F6;&#x95F4;&#x6233; &#x5728;&#x8F93;&#x51FA; &#x8C03;&#x7528;&#x51FD;&#x6570;&#x7684;&#x8FD4;&#x56DE;&#x503C; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>{{ Math.floor(date/1000) }}<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x628A;msg&#x53D8;&#x6210;&#x6570;&#x7EC4;&#xFF0C;&#x5012;&#x5E8F;&#xFF0C;&#x7136;&#x540E;&#x62FC;&#x63A5;&#x8D77;&#x6765; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>{{ msg.split(&apos;&apos;).reverse().join(&apos;&apos;) }}<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x53EA;&#x4F1A;&#x6E32;&#x67D3;&#x4E00;&#x6B21; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">h2</span> <span class="hljs-attribute">v-once</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-title">h2</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
</code></pre>
<pre><code class="lang-js">    <span class="hljs-comment">/* 
        MVVM  M--&gt;Model     //&#x5373;&#x662F;&#x6570;&#x636E; 
        v--&gt;View            //&#x89C6;&#x56FE;
        VM--&gt;View Model     //&#x6E32;&#x67D3;DOM/&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;/&#x52A8;&#x6001;&#x66F4;&#x65B0;&#x6570;&#x636E;
        */</span>
        <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({
            el:<span class="hljs-string">&apos;#app&apos;</span>,     <span class="hljs-comment">//&#x6302;&#x8F7D;&#x7684;&#x9875;&#x9762;&#x8282;&#x70B9;</span>
            data:{         <span class="hljs-comment">//&#x52A8;&#x6001;&#x53D8;&#x5316; &#x6216; &#x8F93;&#x51FA;&#x7684;&#x6570;&#x636E;</span>
                msg:<span class="hljs-string">&apos;vue&apos;</span>,   
                p:<span class="hljs-string">&apos;&#x8FD9;&#x662F;p&#x6807;&#x7B7E;&apos;</span>,
                p2:<span class="hljs-string">&apos;&lt;a href=&quot;&quot;&gt;&#x8FD9;&#x662F;p&#x6807;&#x7B7E;&lt;/a&gt;&apos;</span>,
                isVue:<span class="hljs-literal">true</span>,
                date:(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()).getTime()
            }
        })
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x5B9E;&#x4F8B;&#x5316;vue&apos;</span>,vm);
        setTimeout(()=&gt;{
            <span class="hljs-comment">// vm.$data.msg = &apos;test&apos;;</span>
            vm.msg = <span class="hljs-string">&apos;test&apos;</span>;
        },<span class="hljs-number">1500</span>)
</code></pre>
<h2 id="vuejs03">Vuejs03</h2>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;app&quot;</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- &#x6570;&#x7EC4;&#x904D;&#x5386; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
            <span class="hljs-comment">&lt;!-- v-for = &quot;(&#x6210;&#x5458;(&#x540D;&#x5B57;&#x968F;&#x4FBF;&#x8D77;)) in &#x6570;&#x7EC4;&quot; --&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&apos;item in menu&apos;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
            <span class="hljs-comment">&lt;!-- v-for = &quot;(&#x6210;&#x5458;,&#x4E0B;&#x6807;) in &#x6570;&#x7EC4;&quot; --&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&apos;(item,index) in menu&apos;</span>&gt;</span>NaN:<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- &#x5BF9;&#x8C61;&#x904D;&#x5386; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
            <span class="hljs-comment">&lt;!-- v-for=&quot;(&#x5C5E;&#x6027;&#x503C;&#xFF0C;&#x5C5E;&#x6027;&#x540D;&#xFF0C;&#x904D;&#x5386;&#x987A;&#x5E8F;) in &#x5BF9;&#x8C61;&quot; --&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&apos;(value,key,i) in obj&apos;</span>&gt;</span>::<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- &#x6B63;&#x6574;&#x6570;&#x904D;&#x5386; &#x4ECE;1&#x5F00;&#x59CB;&#x6570; --&gt;</span>
        <span class="hljs-comment">&lt;!-- 
            key &#x7528;&#x4E8E;&#x6807;&#x8BC6;&#x8282;&#x70B9;&#xFF0C;&#x8BA9;vue&#x77E5;&#x9053;&#x5207;&#x6362;&#x4E4B;&#x7C7B;&#x7684;&#x64CD;&#x4F5C;&#xFF0C;&#x5982;&#x679C;&#x662F;&#x7C7B;&#x4F3C;&#x7684;&#x6807;&#x7B7E;&#x5C31;&#x4E0D;&#x518D;&#x590D;&#x7528;
            &#x5982;&#x679C;&#x662F;&#x6392;&#x5E8F;&#x4E4B;&#x7C7B;&#x7684;&#x64CD;&#x4F5C;&#x53EF;&#x4EE5;&#x590D;&#x7528;&#xFF0C;&#x8282;&#x7701;&#x6027;&#x80FD;
         --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&quot;n in 5&quot;</span> <span class="hljs-attribute">:key</span>=<span class="hljs-value">&quot;n&quot;</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&quot; n%2!=0 &quot;</span>&gt;</span>&#x661F;<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- 2,4&#x9690;&#x85CF; --&gt;</span>
        <span class="hljs-comment">&lt;!-- &lt;span v-for=&quot;n in 5&quot;:key=&apos;n&apos; v-if=&apos;n%2!=0&apos;&gt;&#x661F;&lt;/span&gt; --&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x6539;&#x53D8;&#x6570;&#x7EC4;&#x5185;&#x5BB9; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&quot;change&quot;</span>&gt;</span>&#x53D8;&#x4E3A;&#x8D3C;&#x83DC;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
            <span class="hljs-comment">&lt;!-- v-for = &quot;(&#x6210;&#x5458;,&#x4E0B;&#x6807;) in &#x6570;&#x7EC4;&quot; --&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&apos;(item,index) in menu&apos;</span>&gt;</span>NaN:<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
</code></pre>
<pre><code class="lang-js"> <span class="hljs-keyword">new</span> Vue({
            el:<span class="hljs-string">&apos;#app&apos;</span>,
            data:{
                menu:[<span class="hljs-string">&apos;&#x5927;&#x83DC;&apos;</span>,<span class="hljs-string">&apos;&#x4E2D;&#x83DC;&apos;</span>,<span class="hljs-string">&apos;&#x5C0F;&#x83DC;&apos;</span>],
                obj:{
                    name:<span class="hljs-string">&quot;&#x756A;&#x8304;&#x7092;&#x86CB;&quot;</span>,
                    price:<span class="hljs-string">&quot;10&quot;</span>
                }
            },
            methods:{
                change(){
                    <span class="hljs-comment">//&#x9519;&#x8BEF;&#x5199;&#x6CD5;</span>
                    <span class="hljs-comment">// this.menu[0] = &apos;&#x62E9;&#x83DC;&apos;;</span>
                    <span class="hljs-comment">//&#x6574;&#x4E2A;&#x6570;&#x7EC4;&#x66FF;&#x6362;</span>
                    <span class="hljs-comment">// this.menu = this.menu.concat([1,2,3]);</span>
                    <span class="hljs-comment">//&#x66FF;&#x6362;</span>
                    <span class="hljs-keyword">this</span>.menu.splice(<span class="hljs-number">0</span>,<span class="hljs-number">1</span>,<span class="hljs-string">&apos;&#x8D3C;&#x83DC;&apos;</span>);

                    <span class="hljs-comment">// this.obj.name = &apos;&#x867E;&#x4EC1;&#x7092;&#x86CB;&apos;;</span>

                    <span class="hljs-comment">//&#x65B0;&#x589E;&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;</span>
                    <span class="hljs-comment">// this.$set(this.obj,&apos;update&apos;,&apos;&#x626C;&#x5DDE;&#x7092;&#x996D;&apos;);</span>

                    <span class="hljs-comment">/* Object.defineProperty(obj,&quot;update&quot;,{
                        get:function(){},
                        set:function(){}
                    }) */</span>

                }  
            }
        })
</code></pre>
<h2 id="vuejs03">Vuejs03</h2>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;menu&quot;</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;app&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;menu1&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;classfy&quot;</span> 
                    <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&quot;(item,index) in menu&quot;</span>
                    @<span class="hljs-attribute">click</span>=<span class="hljs-value">&apos;changeMenu(index)&apos;</span>
                &gt;</span>{{item.name}}<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>

            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;menu2&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;m2_t&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">&quot;&#x83DC;&#x540D;&quot;</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">&quot;input1&quot;</span> /&gt;</span> 
                    <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;number&quot;</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">&quot;&#x4EF7;&#x683C;&quot;</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">&quot;input2&quot;</span> /&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;add&quot;</span> <span class="hljs-attribute">v-on:click</span>=<span class="hljs-value">&quot;test1(menu)&quot;</span>&gt;</span>&#x6DFB;&#x52A0;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span> 

                <span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
                    <span class="hljs-comment">&lt;!-- f&#xFF1A;&#x4EE3;&#x8868;&#x6210;&#x5458;(menu[menu_index].food)  i&#xFF1A;&#x4EE3;&#x8868;&#x4E0B;&#x6807; --&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&apos;(f,i) in menu[menu_index].food&apos;</span> &gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">span</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&apos;CaiName(f,i)&apos;</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&apos;!isShow&apos;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">&quot;input3&quot;</span> <span class="hljs-attribute">v-else</span>=<span class="hljs-value">&apos;isShow&apos;</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">span</span>&gt;</span>&#x4EF7;&#x683C;&#xFF1A;<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;del&quot;</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&apos;del(menu_index,i)&apos;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;change&apos;</span>&gt;</span>&#x4FEE;&#x6539;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
</code></pre>
<pre><code class="lang-js"> <span class="hljs-keyword">new</span> Vue({
            el:<span class="hljs-string">&apos;#app&apos;</span>,
            data:{
                isShow:<span class="hljs-literal">true</span>,
                inp:<span class="hljs-string">&apos;1&apos;</span>,
                menu:[
                    {<span class="hljs-string">&quot;type_id&quot;</span>:<span class="hljs-number">1</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x5927;&#x83DC;&quot;</span>,<span class="hljs-string">&quot;food&quot;</span>:[
                        {<span class="hljs-string">&quot;food_id&quot;</span>:<span class="hljs-number">1</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x9C7C;&#x9999;&#x8089;&#x4E1D;&quot;</span>,<span class="hljs-string">&quot;price&quot;</span>:<span class="hljs-string">&quot;10&quot;</span>},
                        {<span class="hljs-string">&quot;food_id&quot;</span>:<span class="hljs-number">2</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x7EA2;&#x70E7;&#x8089;&quot;</span>,<span class="hljs-string">&quot;price&quot;</span>:<span class="hljs-string">&quot;11&quot;</span>},
                        {<span class="hljs-string">&quot;food_id&quot;</span>:<span class="hljs-number">3</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x9999;&#x8FA3;&#x7C89;&quot;</span>,<span class="hljs-string">&quot;price&quot;</span>:<span class="hljs-string">&quot;12&quot;</span>}
                    ]},
                    {<span class="hljs-string">&quot;type_id&quot;</span>:<span class="hljs-number">2</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x4E2D;&#x83DC;&quot;</span>,<span class="hljs-string">&quot;food&quot;</span>:[
                        {<span class="hljs-string">&quot;food_id&quot;</span>:<span class="hljs-number">4</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x5C0F;&#x7092;&#x8089;&quot;</span>,<span class="hljs-string">&quot;price&quot;</span>:<span class="hljs-string">&quot;13&quot;</span>},
                        {<span class="hljs-string">&quot;food_id&quot;</span>:<span class="hljs-number">5</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x4E91;&#x541E;&quot;</span>,<span class="hljs-string">&quot;price&quot;</span>:<span class="hljs-string">&quot;14&quot;</span>}
                    ]},
                    {<span class="hljs-string">&quot;type_id&quot;</span>:<span class="hljs-number">3</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x5C0F;&#x83DC;&quot;</span>,<span class="hljs-string">&quot;food&quot;</span>:[
                        {<span class="hljs-string">&quot;food_id&quot;</span>:<span class="hljs-number">6</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x96EA;&#x7CD5;&quot;</span>,<span class="hljs-string">&quot;price&quot;</span>:<span class="hljs-string">&quot;15&quot;</span>},
                        {<span class="hljs-string">&quot;food_id&quot;</span>:<span class="hljs-number">7</span>,<span class="hljs-string">&quot;name&quot;</span>:<span class="hljs-string">&quot;&#x9EC4;&#x74DC;&quot;</span>,<span class="hljs-string">&quot;price&quot;</span>:<span class="hljs-string">&quot;16&quot;</span>}
                    ]}      
                ],
                menu_index:<span class="hljs-number">0</span>
            },
            methods:{
                changeMenu(index){
                    <span class="hljs-comment">//&#x5207;&#x6362; &#x83DC;&#x5355;&#x4E0B;&#x6807;</span>
                    <span class="hljs-keyword">this</span>.menu_index = index;
                    <span class="hljs-built_in">console</span>.log(index);
                },
                <span class="hljs-comment">//&#x5F39;&#x6846;</span>
                modeConfirm(subIndex){
                    <span class="hljs-keyword">this</span>.consfirmShow=<span class="hljs-literal">true</span>;
                    <span class="hljs-built_in">console</span>.log(subIndex);
                    <span class="hljs-keyword">this</span>.modifyData.index = subIndex;
                }  
            }
        })
</code></pre>
<h2 id="vuejs04">Vuejs04</h2>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;app&quot;</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- 
            &#x9875;&#x9762;&#x4E0A;&#x7684;&#x5185;&#x5BB9;&#xFF08;&#x5F71;&#x54CD;&#xFF09;&lt;--&#x7ED1;&#x5B9A;data(&#x6539;&#x53D8;)
                                    |
            &#x9875;&#x9762;&#x7684;&#x4EA4;&#x4E92;   -&gt;          &#x4E8B;&#x4EF6; 
         --&gt;</span>
        <span class="hljs-comment">&lt;!-- &lt;input type=&quot;text&quot; @input=&quot;inputEvent&quot; :value=&quot;inp_val1&quot;&gt; --&gt;</span>

        <span class="hljs-comment">&lt;!-- 
            v-model
            &#x7ED3;&#x5408;&#x4E86;&#x4E8B;&#x4EF6;&#x548C;&#x5C5E;&#x6027;&#x7684;&#x7ED1;&#x5B9A;
         --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> <span class="hljs-attribute">v-model</span>=<span class="hljs-value">&quot;inp_val1&quot;</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x5355;&#x9009;&#xFF0C;&#x4E00;&#x822C;&#x7528;&#x5B57;&#x7B26;&#x4E32;&#x8868;&#x793A;&#x6570;&#x636E;&#x7684;&#x503C; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;radio&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&apos;sex&apos;</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;man&quot;</span> <span class="hljs-attribute">v-model</span>=<span class="hljs-value">&quot;sex&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;man&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">&quot;man&quot;</span>&gt;</span>&#x7537;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;radio&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&apos;sex&apos;</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;woman&quot;</span> <span class="hljs-attribute">v-model</span>=<span class="hljs-value">&quot;sex&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;woman&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">&quot;woman&quot;</span>&gt;</span>&#x5973;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;radio&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&apos;sex&apos;</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;gay&quot;</span> <span class="hljs-attribute">v-model</span>=<span class="hljs-value">&quot;sex&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;gay&quot;</span> &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">&quot;gay&quot;</span>&gt;</span>gay<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x591A;&#x9009;&#xFF0C;
            &#x5982;&#x679C;&#x662F;&#x5E03;&#x5C14;&#x503C;&#xFF0C;&#x8868;&#x793A;&#x5168;&#x9009;&#x6216;&#x5168;&#x4E0D;&#x9009;
            &#x5982;&#x679C;&#x662F;&#x6570;&#x7EC4;&#xFF0C;&#x8868;&#x793A;&#x9009;&#x62E9;&#x54EA;&#x4E00;&#x4E2A;&#xFF0C;&#x987A;&#x5E8F;&#x7531;&#x70B9;&#x51FB;&#x52FE;&#x9009;&#x987A;&#x5E8F;&#x51B3;&#x5B9A;
         --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;checkbox&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&apos;hobby&apos;</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;lol&quot;</span> <span class="hljs-attribute">v-model</span>=<span class="hljs-value">&quot;hobby&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;lol&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">&quot;lol&quot;</span>&gt;</span>lol<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;checkbox&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&apos;hobby&apos;</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;wangzhe&quot;</span> <span class="hljs-attribute">v-model</span>=<span class="hljs-value">&quot;hobby&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;wangzhe&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">&quot;wangzhe&quot;</span>&gt;</span>wangzhe<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;checkbox&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&apos;hobby&apos;</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;chiji&quot;</span> <span class="hljs-attribute">v-model</span>=<span class="hljs-value">&quot;hobby&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;chiji&quot;</span> &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">&quot;chiji&quot;</span>&gt;</span>chiji<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x4E0B;&#x62C9;&#x6846; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">select</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;type&quot;</span> <span class="hljs-attribute">v-model</span>=<span class="hljs-value">&quot;type&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;a&quot;</span>&gt;</span>a<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;b&quot;</span>&gt;</span>b<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;c&quot;</span>&gt;</span>c<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;d&quot;</span>&gt;</span>d<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">select</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-title">hr</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- v-model&#x4FEE;&#x9970;&#x7B26; --&gt;</span>
        <span class="hljs-comment">&lt;!-- .trim &#x5220;&#x9664;&#x5934;&#x5C3E;&#x7A7A;&#x683C; --&gt;</span>
        <span class="hljs-comment">&lt;!-- .lazy &#x76D1;&#x542C;change&#x89E6;&#x53D1;&#x4E4B;&#x540E;&#x518D;&#x66F4;&#x65B0;data&#x4E2D;&#x7684;&#x6570;&#x636E; --&gt;</span>
        <span class="hljs-comment">&lt;!-- .number &#x53EA;&#x63A5;&#x53D7;&#x6570;&#x5B57; &#x53EA;&#x80FD;&#x662F;&#x88AB;parseFloat&#x89E3;&#x6790;&#x7684;&#x7ED3;&#x679C;&#xFF0C;&#x5426;&#x5219;&#x8FD4;&#x56DE;&#x539F;&#x59CB;&#x503C;
                &#x4F8B;&#x5982;&#xFF1A;parseFloat(aa123) &#x8FD4;&#x56DE;NaN,&#x529F;&#x80FD;&#x5C31;&#x5931;&#x6548;
         --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> <span class="hljs-attribute">v-model.trim</span>=<span class="hljs-value">&apos;inp_vala&apos;</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">&quot;trim&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> <span class="hljs-attribute">v-model.lazy</span>=<span class="hljs-value">&apos;inp_valb&apos;</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">&quot;lazy&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> <span class="hljs-attribute">v-model.number</span>=<span class="hljs-value">&apos;inp_valc&apos;</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">&quot;number&quot;</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- change&#x662F;&#x8868;&#x5355;&#x7684;value&#x6539;&#x53D8;&#x65F6;&#x89E6;&#x53D1; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> @<span class="hljs-attribute">change</span>=<span class="hljs-value">&quot;testChange&quot;</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
</code></pre>
<pre><code class="lang-js"> <span class="hljs-keyword">new</span> Vue({
            el:<span class="hljs-string">&apos;#app&apos;</span>,
            data:{
                inp_val1:<span class="hljs-string">&quot;&quot;</span>,
                inp_vala:<span class="hljs-string">&quot;&quot;</span>,
                inp_valb:<span class="hljs-string">&quot;&quot;</span>,
                inp_valc:<span class="hljs-string">&quot;&quot;</span>,
                sex:<span class="hljs-string">&apos;&apos;</span>,
                hobby:[],
                type:<span class="hljs-string">&apos;&apos;</span>
            },
            methods:{
                 inputEvent(event){
                     <span class="hljs-keyword">this</span>.inp_val1= event.target.value;
                 },
                 testChange(){
                     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x98DE;&#x8757;&#x829C;&#x6E56;&apos;</span>)
                 }   
            }
        })
</code></pre>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../../前端学习笔记/Vuejs/Vuejs知识目录.html" class="navigation navigation-prev " aria-label="Previous page: Vuejs"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../../前端学习笔记/Vuejs/Vuejs进阶.html" class="navigation navigation-next " aria-label="Next page: Vuejs进阶"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../../gitbook/app.js"></script>

    
    <script src="../../gitbook/plugins/gitbook-plugin-toggle-chapters/toggle.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"toggle-chapters":{},"expandable-chapters":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        <!-- body:end -->
    </body>
    <!-- End of book 我的笔记 -->
</html>
